<template>
  <ContentWrap>
    <!-- 搜索栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="90px"
    >
      <el-form-item label="外壳名称" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入图书外壳名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['housing:add']" plain type="primary" @click="create">
          <Icon class="mr-5px" icon="ep:upload" />
          新建外壳
        </el-button>
        <el-button v-hasPermi="['housing:add']" plain type="primary" @click="createBatch">
          <Icon class="mr-5px" icon="ep:upload" />
          批量新建外壳
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="编号" prop="id" />
      <el-table-column align="center" label="外壳名称" prop="name" />
      <el-table-column align="center" label="类型" prop="typeName" />
      <el-table-column align="center" label="关联资源数量" prop="count" />
      <el-table-column align="center" prop="assoc" label="是否关联资源">
        <template #default="scope">
          <el-tag v-show="scope.row.assoc" type="primary" effect="light">是</el-tag>
          <el-tag v-show="!scope.row.assoc" type="danger" effect="light">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180" />
      <el-table-column :width="300" align="center" label="操作">
        <template #default="scope">
          <el-button v-hasPermi="['housing:add']" link type="primary" @click="update(scope.row.id)">
            编辑
          </el-button>
          <el-button
            v-hasPermi="['housing:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <HousingForm ref="formRef" />
  <HousingFormBatch ref="formRefBatch" />
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import HousingBookForm from '@/views/housing/book/HousingBookForm.vue'
import * as houseBookApi from '@/api/house/book'
import request from '@/config/axios'
import ResourceList from '@/views/housing/book/ResourceList.vue'
import HousingForm from '@/views/housing/HousingForm.vue'
import HousingFormBatch from '@/views/housing/HousingFormBatch.vue'
import { DICT_TYPE } from '@/utils/dict'

const message = useMessage()
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据

const vFormRef = ref<any>()

const formRef = ref<any>()
const formRefBatch = ref<any>()

const queryFormRef = ref()

const resListRef = ref()

const showPreviewDialogFlag = ref(false)

const previewTitle = ref('添加')

const formJson = ref({
  widgetList: [],
  formConfig: {}
})

const formData = ref({})

const optionData = ref({})

const selectHouse = ref(0)

const createResource = (id) => {
  showPreviewDialogFlag.value = true
  selectHouse.value = id
}

const createBatch = () => {
  formRefBatch.value.openDialog()
}
const create = () => {
  formRef.value.openDialog()
}
const update = (id) => {
  console.log(id)
  formRef.value.updateDialog(id)
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  createTime: []
})
const handleQuery = () => {
  getList()
}
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const handleDelete = async (rid) => {
  console.log('删除')
  try {
    await message.confirm('确定删除该条数据吗？')
    let ids = []
    ids.push(rid)
    await houseBookApi.deleted(ids)
    await getList()
  } catch {}
}

const getList = async () => {
  loading.value = true
  try {
    const data = await houseBookApi.page(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const fieldList = ref([])

const selectForm = () => {
  request
    .get({ url: '/meta/one/42' })
    .then((res) => {
      console.log(res)
      let f = JSON.parse(res.tableForm)
      formJson.value.widgetList = f.widgetList
      formJson.value.formConfig = f.formConfig
      res.fieldList.forEach((item) => {
        fieldList.value.push({
          key: item.id,
          label: item.fieldDesc
        })
      })
    })
    .catch((error) => {
      console.log(error)
    })
}

const saveResource = async () => {
  let formDataJson = await vFormRef.value.getFormData()
  formDataJson.house = selectHouse.value
  formDataJson.cover = JSON.stringify(formDataJson.cover)
  request
    .post({ url: '/meta/data/42/create', data: formDataJson })
    .then((res) => {
      showPreviewDialogFlag.value = false
      message.success('保存成功!')
    })
    .catch((error) => {
      message.error('保存失败!')
    })
}

const reslist = (row) => {
  console.log(row)
  resListRef.value.openDialog(row.id)
}

provide('getList', getList)

/** 初始化 **/
onMounted(() => {
  getList()
  selectForm()
})
</script>
